<template>
  <el-dialog v-model="props.dialogVisible" title="交卷成功" width="500" align-center>
    <div class="tip">
      <p>系统改卷中···</p>
      <p>{{ surplusTime }}秒后，自动跳转查看结果</p>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button v-if="surplusTime <= 0" type="primary" @click="emit('callback')">点击这里跳转</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
  import { formatTime } from '~/utils/base'

  const props = defineProps({
    dialogVisible: { type: Boolean, default: false },
    downTime: { type: Number, default: 10 }
  })

  const { downTime } = toRefs(props)
  const surplusTime = ref(props.downTime)
  watch(downTime, (newValue) => {
    surplusTime.value = newValue
  })

  const emit = defineEmits(['callback'])
  let timerInterval = null
  const timeText = ref('')
  onMounted(() => {
    // 倒计时
    timerInterval = setInterval(() => {
      if (surplusTime.value > 0) {
        surplusTime.value--
        timeText.value = formatTime(surplusTime.value)
      } else {
        clearInterval(timerInterval)
        timeText.value = props.tip
        emit('callback')
      }
    }, 1000)
  })
  onUnmounted(() => {
    if (timerInterval) {
      clearInterval(timerInterval)
    }
  })
</script>
<style lang="scss" scoped>
  .tip {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 18px;
  }
</style>
